<!--
 * @Author: Wang WeiHao
 * @Date: 2024-10-12 16:08:48
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-10-21 15:29:11
 * @Description: 
 * @FilePath: \geo-base-dm\src\views\main\ai-analysis\analysisResult.vue
-->
<template>
	<div class="box">
		<div class="chart">
			<div id="analysechart" style="width: 1030px; height: 300px"></div>
		</div>
		<div class="table">
			<el-table
				class="list-table"
				:data="chartsData"
				:header-cell-style="{
					background: '#113659',
					fontWeight: 400,
					color: '#fff',
				}"
				height="400"
				:header-row-style="{ background: '#113659' }"
				:row-style="{ background: '#0a2641' }"
				:cell-style="{ background: '#0a2641', borderBottom: '1px solid #184168', color: '#fff' }"
			>
				<el-table-column type="expand">
					<template #default="{ row }">
						<el-table :data="row.children" style="width: 100%" :show-header="false">
							<el-table-column
								width="200"
								:prop="item"
								:label="getTrans(index)"
								v-for="(item, index) in lableList"
								:key="index"
							>
							</el-table-column>
						</el-table>
					</template>
				</el-table-column>
				<el-table-column
					width="200"
					:prop="item"
					:label="getTrans(index)"
					v-for="(item, index) in lableList"
					:key="index"
				>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const props = defineProps<{
	chartsData: Array<any>;
	vectitle: Array<any>;
}>();

const lableList = ref([]);
const getTrans = (index: any) => {
	return props.vectitle[index];
};
watch(
	() => props.chartsData,
	() => {
		fleshchart();
	}
);
const fleshchart = () => {
	let arr = props.chartsData;
	const uniqueKeysSet = new Set();
	arr.forEach((object: any) => {
		// 遍历对象的每个键，并将其添加到Set中
		// 由于Set会自动去重，因此重复的键只会被存储一次
		Object.keys(object).forEach((key) => {
			uniqueKeysSet.add(key);
		});
	});
	const myChart = echarts.init(document.getElementById("analysechart") as HTMLDivElement);
	const option = {
		xAxis: {
			type: "category",
			data: arr.map((item) => item.landname),
			axisLabel: {
				interval: 0, // 强制显示所有标签
			},
		},
		yAxis: {
			type: "value",
		},
		grid: {
			left: "3%",
			right: "0%",
			bottom: "13%",
			containLabel: true,
		},
		// dataZoom: [
		// 	{
		// 		show: true,
		// 		height: 12,
		// 		xAxisIndex: [0],
		// 		bottom: "8%",
		// 		start: 10,
		// 		end: 70,
		// 		handleIcon:
		// 			"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
		// 		handleSize: "110%",
		// 		handleStyle: {
		// 			color: "#d3dee5",
		// 		},
		// 		textStyle: {
		// 			color: "#fff",
		// 		},
		// 		borderColor: "#90979c",
		// 	},
		// 	{
		// 		type: "inside",
		// 		show: true,
		// 		height: 15,
		// 		start: 1,
		// 		end: 35,
		// 	},
		// ],
		legend: {
			show: true,
			data: [props.vectitle[2], props.vectitle[3]],
			textStyle: {
				color: "#fff",
			},
		},
		series: [
			{
				name: props.vectitle[2],
				data: arr.map((item) => item.leftArea),
				type: "bar",
			},
			{
				name: props.vectitle[3],
				data: arr.map((item) => item.rightArea),
				type: "bar",
			},
		],
	};
	myChart.setOption(option);
	console.log(props.vectitle[2], props.vectitle[3]);
};
onMounted(() => {
	let arr = props.chartsData;
	const uniqueKeysSet = new Set();
	arr.forEach((object: any) => {
		// 遍历对象的每个键，并将其添加到Set中
		// 由于Set会自动去重，因此重复的键只会被存储一次
		Object.keys(object).forEach((key) => {
			console.log(key);
			if (key != "children") {
				uniqueKeysSet.add(key);
			}
		});
	});

	// 将Set转换成数组，以便后续使用
	lableList.value = Array.from(uniqueKeysSet);
	fleshchart();
});
</script>

<style lang="scss" scoped>
.box {
	width: 800px;
	// height: 400px;
}

.table {
	width: 100%;
	height: 400px; /* 确保高度固定，超过时自动滚动 */
	overflow: auto; /* 超出部分滚动 */
}
.list-table {
	--el-table-border-color: none;
	background-color: transparent;
	@apply w-full;
	.data-tag {
		@apply flex items-center justify-center;
		width: 54px;
		height: 20px;
		background: #276eb7;
		border-radius: 50px 50px 50px 50px;
		&.data-tag-off {
			background: #d77820;
		}
	}
	.el-button {
		margin-right: 12px;
	}
	.el-table__empty-block {
		background-color: #0a2641;
	}
}
</style>
